Valid XHTML 1.0! Valid CSS !

Les Formulaires

Grâce aux formulaires, les webmasters ont la possibilité de recueillir les commentaires des internautes et de les faire participer.
En outre on peu considérer qu'il existe deux types de sites :

Les sites statiques : ce sont des "vitrines" qui ne font que donner des informations. Les visiteurs peuvent lire le site mais pas y participer.
Les sites dynamiques : ce sont des sites plus évolués dont le contenu peut être crée par des visiteurs. On peut citer par exemple les sites comportant des forums, ou encore Wikipédia, l'encyclopédie en ligne à laquelle tout le monde peut participer.

Réaliser un site dynamique est beaucoup plus complexe que ça en à l'air. Il faut en effet utiliser un langage de script comme le PHP ou l'ASP, capable de traiter l'information.

Les formulaires sont à la base des sites dynamiques. Si ce que nous allons voir reste du XHTML, le traitement de l'information, lui, nécessite un langage de script comme le PHP ou l'ASP.

Le code minimal d'un formulaire

La balise de formulaire

Un formulaire se place à l'intérieur des balises <form> </form>. Ces balises doivent être situées à l'éxtérieur des paragraphes, comme ceci:

<p> Paragraphe avant le formulaire</p>
<form>
</form>
<p> Paragraphe après le formulaire</p>

Si l'on désire écrire du texte à l'intérieur du formulaire, il faudra le placer dans des balises de paragraphes <p> </p>. Par exemple :

<p> Paragraphe avant le formulaire</p>
<form>
<p> Paragraphe à l'intérieur du formulaire</p>
</form>
<p> Paragraphe après le formulaire</p>

L'envoi des données

Une fois qu'un visiteur aura rempli le formulaire, il cliquera sur le bouton Envoyer. Mais ou ces informations vont-elles être envoyées et par quel moyen ?
Pour indiquer cela, il faut ajouter impérativement deux attributs à la balise <form> :

method : Cet attribut permet d'indiquer la méthode d'envoi des données. C'est un concept un peu abstrait quand on ne connait pas de langage de script comme le PHP. Quoi qu'il en soit voici les deux méthodes possibles :
- method="get" : Les informations seront transmises dans l'adresse de la page. Le visiteur verra ainsi les informations qu'il a rentrées transiter dans sa barre d'adresse comme ceci :
  http://www.site.com/page.php?nom=dupont&prenom=jean
  Cette méthode d'envoi est toutefois limitée à 255 caractères, ce qui fait qu'on l'utilise assez rarement avec les formulaires.
- method="post" : c'est la méthode la plus adaptée aux formulaires. Cette fois l'utilisateur ne verra pas transiter les informations qu'il a rentrées dans sa barre d'adresse. De plus, le principal avantage de cette méthode est qu'elle permet d'envoyer beaucoup plus d'informations à la fois.
action : Indique l'adresse de la page vers laquelle doit être redirigé le visiteur une fois qu'il a cliqué sur le bouton Envoyer. Cette page doit être une page de script et donc comporter par exemple l'extension .php ou .asp et non .html

Ce qui nous donne le code suivant :

<form method="post" action="traitement.php">
</form>

Cela implique qu'il y ait une page traitement.php dans le même dossier que le fichier .html contenant le formulaire. Cette page recevra les informations du formulaire et les traitera : elle pourra par exemple envoyer un e-mail contenant ces informations, ou encore les stocker dans une base de données.

Les zones de saisie

Les premiers éléments des formulaires que nous allons étudier sont les zones de saisie. Ce sont tout simplement des zones où l'on peut taper du texte pour indiquer son nom, son pseudonyme, son mot de passe, etc.

Il existe deux types de zones de saisie :

La zone de texte monoligne : dans cette zone de texte, on ne peut rentrer qu'une seule ligne à la fois. C'est idéal pour les textes courts.
La zone de texte multiligne : plus grande, cette zone de texte permet de rédiger plusieurs lignes. C'est dans une zone de texte multiligne que l'on pourra, par exemple, demander l'avis aux visiteurs de laisser des commentaires sur le site.

Zone de texte monoligne

La création d'une zone de texte à une seule ligne requiert la balise <input/>. Comme la balise <br/> , c'est une balise auto-fermante.

Pour donner un rôle précis à cette balise, il faut impérativement lui ajouter des attributs.

Attributs obligatoires

Une zone de texte monoligne se construit avec l'attribut type auquel il faut donner la valeur text. Nous obtenons déjà donc au minimum le code suivant :

<form method="post" action="traitement.php">
<p> <input type="text" / > </p>
</form>

Toutefois il manque encore des attributs.

name est un attribut particulièrement important. Il permet de donner un nom à la zone de saisie, ce qui permettra plus tard de l'identifier. De préférence on évite les noms composés de majuscules, les accents et les espaces.

Pa exemple si notre champ est déstiné à recevoir la profession du visiteur, on peut écrire :

<form method="post" action="traitement.php">
<p> <input type="text" name="profession" / > </p>
</form>

On peut voir que le nom du champ ne sera pas affiché sur la page.

Remarque : Si un champ est déstiné à recevoir un mot de passe, il est préférable de masquer les lettres tapées par le visiteur. Pour ce faire, il suffit simplement de donner la valeur password à l'attribut type comme ceci :

<input type="password" />

Attributs facultatifs

En plus des attributs indispensables, il y a quelques autres attributs importants. Voici les plus utiles d'entre eux :

value : indique la valeur par défaut du champ. La zone de texte sera préremplie avec la valeur. Par exemple value="profession".
size : indique la largeur du champ. Par exemple size="15".
max-length : indique le nombre maximal de caractères que peut rentrer l'internaute. Par exemple, maxlength="20".

L'exemple suivant aura une taille de 15 et la valeur "informaticien" par défaut :

<form method="post" action="traitement.php">
<p>
<input type="text" name="profession" size="15" value="informaticien" /> </p>
</p>
</form>

On peut voir que la taille du champ a bien été modifiée et qu'il y a bien la valeur par défaut.

Créer un libellé

Pour le moment, notre zone de texte est bien jolie mais le visiteur qui arrive sur cette page aura du mal à deviner ce qu'il est censé écrire dedans ! C'est là tout l'intérêt des libellés.
Un libellé est un court texte à placer entre des balises <label> </label>. Il permet d'indiquer au visiteur ce que doit contenir le champ. Il ne sert pas que pour les zones de texte : on peut l'utiliser aussi sur tous les autres éléments de formulaire (cases à cocher, listes...).

Un libellé doit être lié au champ de formulaire auquel il se rapporte. Pour ce faire on doit lui ajouter l'attribut for qui doit avoir pour valeur l'id du champ auquel il doit être lié.

Voici une exemple :

<form method="post" action="traitement.php">
<p>
<label for="profession"> Entrez votre profession :</label>
<input type="text" name="profession" id="profession" value="informaticien" />
</p>
</form>

Regardons ce code de plus près : l'attribut for du <label> doit être le même que l'id inclus dans la balise <input> L'ordinateur saura ainsi que le libellé correspond au champ de texte profession.

L'exemple montre le libellé en action. Si l'on clique sur le libellé avec la souris, le curseur se placera automatiquement dans le champ de texte correspondant.

Zone de texte multiligne

A la différence d'une zone de texte monoligne, le visiteur peut saisir cette fois plusieurs lignes de texte. Il peut écrire un roman s'il le souhaite, rien ne l'en empêche.

Ici, la balise à utiliser fonctionne par paire. Il s'agit de <textarea> </textarea>. Comme précédemmment, il est nécessaire de donner un nom à ce champ grâce à l'attribut name. De même il est fortement conseillé de créer un libellé, et donc d'ajouter un attribut id à la zone de texte.

<form method="post" action="traitement.php">
<p>
<label for="remarques"> Remarques concernant mon site Web :</label>
<br/>
<textarea name="remarques" id="remarques" > </textarea>
</p>
</form>

La zone de texte par défaut n'est pas très grande comme l'on peut le constater (surtout si le visiteur à beaucoup de remarques concernant mon site ). Il faudrait agrandir la taille de cette zone de texte.

Pour cela, on peut ajouter les attributs rows et cols qui indiquent respectivement le nombre de lignes et le nombre de colonnes dont le champ est constitué.

<form method="post" action="traitement.php">
<p>
<label for="remarques"> Remarques concernant mon site Web :</label>
<br/>
<textarea name="remarques" id="remarques" rows="10" cols="45">
</textarea>
</p>
</form>

Le visiteur dispose maintenant de plus de place pour rédiger des remarques.

Les options

Les formulaires ne se limitent pas aux zones de saisie : on peut aussi y intégrer des options. Ces éléments permettent aux visiteurs de faire un choix entre plusieurs valeurs possibles.

Il existe trois types d'options :

Les cases à cocher ;
Les zones d'options ;
Les listes déroulantes.

Les cases à cocher

La encore on utilise la balise <input />. Pour ne pas la confondre avec une zone de texte monoligne, l'on doit changer son attribut type. Cette fois on lui donnera la valeur checkbox. De nouveau, il faut donner un nom à notre élément. On utilisera donc l'attribut name.

Voici un formulaire utilisant des cases à cocher :

<form method="post" action="traitement.php">
<p>
Quels consoles de jeux possédez vous ? <br/>
<input type="checkbox" name="playstation3" id="playstation3" checked="checked" />
<label for="playstation3">La Playstation 3</label><br/>
<input type="checkbox" name="xbox360" id="xbox360" />
<label for="xbox360">La Xbox 360</label><br/>
<input type="checkbox" name="wii" id="wii" />
<label for="wii">La Wii</label><br/>
<input type="checkbox" name="autres" id="autres" />
<label for="autres">Autres</label><br/>
</p>
</form>

Remarque : Case cochée par défaut
Il est possible de faire en sorte qu'une case soit cochée par défaut, c'est à dire au chargement de la page. Il suffit pour cela de rajouter l'attribut checked et de lui a donné l'attribut checked. Dans notre exemple précédent, nous avons utilisé l'attribut checked sur Playstation 3.

Les zones d'options

Les zones d'options sont un peu plus délicates à gérer car elles fonctionnent par groupe. En effet, contrairement aux cases à cocher, on ne peut choisir qu'une seule valeur par groupe.

Pour créer un bouton d'option simple, on utilise toujours la balise <input /> assortie de l'attribut type qui va prendre la valeur radio :

<input type="radio" />

Jusque la c'est facile. Mais cela se complique quand il s'agit de nommer les éléments. En effet les éléments d'un même groupe doivent tous avoir le même nom : l'attribut name doit avoir une valeur identique.

Cette fois pour différencier les éléments, on utilisera l'attribut value. Contrairement à la zone de saisie monoligne, value ne sert pas ici à donner une valeur par défaut, mais permet d'identifier le choix du visiteur.

Voici un exemple :

<form method="post" action="traitement.php">
<h1>Agence de Voyage Vallauris (06) </h1>
<p>
Ou souhaitez vous partir en vacances cet été ? <br/>
<input type="radio" name="destination" value="espagne" id="espagne" />
<label for="espagne">En Espagne</label><br/>
<input type="radio" name="destination" value="portugal" id="portugal" />
<label for="portugal">Au Portugal</label><br/>
<input type="radio" name="destination" value="creuse" id="creuse" />
<label for="creuse">Dans la Creuse</label><br/>
</p>
<p>
Etes vous majeur ou mineur ? <br/>
<input type="radio" name="age" value="majeur" id="majeur" />
<label for="majeur">Majeur (- de 18 ans)</label><br/>
<input type="radio" name="age" value="mineur" id="mineur" />
<label for="mineur">Mineur (- de 18 ans)</label><br/>
</p>
</form>

On peut constater qu'il y a deux noms différents : destination et age. Cela signifie qu'il y a deux zones d'options différentes, donc que le visiteur devra faire deux choix : sa déstination et son age.

La zone d'options concernant la destination propose trois choix, celle sur l´age en propose deux. Tous ces choix sont identifiés par l'attribut value.

Créer des zones d'options différentes permet d'éviter qu'elles interfèrent entre elles. En effet, si on avait donné le même nom (name) à tous les éléments de ce formulaire, nous n'aurions pas pu effectuer deux choix différents (l'un pour la destination, l'autre pour l'âge).

Les listes déroulantes

Les listes déroulantes fonctionnent sur le même principe que les zones d'options : le visiteur doit faire un choix (et un seul) parmi une liste de possibilités.

Une liste déroulante sans groupes

Une liste déroulante se définit à l'intérieur d'une balise <select> </select>. De plus, on nomme la liste déroulante à l'aide de l'attribut name.

<select name="destination">
</select>

A l'intérieur de cette balise, il faut placer les différentes valeurs possibles. Pour ajouter une valeur possible, il faut utiliser la balise <option> </option>. L'on donnera ensuite un nom à la valeur, à l'aide de l'attribut value.

Reprenons l'exemple de l'agence de voyage en utilisant cette fois une liste déroulante :

<form method="post" action="traitement.php">
<h1>Agence de Voyage Vallauris (06) </h1>
<p>
<label for="destination">Ou souhaitez vous partir en vacances cet été ?</label>
<br/>
<select name="destination" id="destination">
<option value="espagne"> En Espagne </option>
<option value="portugal"> Au Portugal </option>
<option value="creuse"> Dans la Creuse </option>
</select>
</p>
</form>

Les listes déroulantes sont utiles lorsqu'il y a beaucoup de valeurs possibles et lorsque l'on ne veut pas prendre trop de place.

Remarque : Valeur par défaut de la liste.
Si l'on ne précise rien, c'est par défaut la première valeur de la liste déroulante qui sera séléctionnée. Pour choisir une autre valeur par défaut, il faut utiliser selected = "selected" sur la balise <option>

Par exemple si l'on veut booster le tourisme dans la Creuse :

<option value="creuse" selected="selected">

La Creuse, apparait désormais comme choix par défaut.

Une liste déroulante avec des groupes

Les listes déroulantes sont plus avantageuses que les zones d'options si l'on a beaucoup de valeurs à proposer. Il est possible de regrouper ces options entre elles à l'aide de la balise <optgroup> </optgroup>.

L'attribut label permet de donner un nom au groupe d'options. Attention cette fois, le nom du groupe sera visible par le visiteur.

Exemple :

<form method="post" action="traitement.php">
<h1>Agence de Voyage Vallauris (06) </h1>
<p>
<label for="destination">Ou souhaitez vous partir en vacances cet été ?</label>
<br/>
<select name="destination" id="destination">
<optgroup label="Europe">
<option value="espagne"> En Espagne </option>
<option value="portugal"> Au Portugal </option>
</optgroup>
<optgroup label="France">
<option value="creuse"> Dans la Creuse </option>
<option value="auvergne"> En Auvergne </option>
<option value="loire"> Dans la Loire </option>
</optgroup>
</select>
</p>
</form>

Les options sont maintenant regroupées par catégories ce qui rend la lecture d'une longue liste plus facile !.

Les boutons

Apres avoir passé en revu les principaux éléments de formulaires, il nous reste à voir les boutons, éléments que l'on retrouve sur tous les formulaires. En effet il y a toujours au moins un bouton, ne serait ce que le plus important de tous : le bouton Envoyer.

Les boutons peuvent avoir des fonctionnalités différentes. On distingue :

Le bouton d'envoi : il commande l'envoi des données. Après avoir cliqué sur ce bouton, le visiteur sera amené sur la page indiquée par l'attribut action de la balise <form>. Un bouton d'envoi se crée à l'aide de la balise <input /> avec l'attribut type="submit".
Le code d'un bouton d'envoi est donc :

<input type="submit" />
Le bouton de remise à zéro : il remet tous les éléments du formulaire à leur valeur par défaut.

<input type="reset" />

De plus, on peut changer le texte affiché sur le boutton grâce à l'attribut value

Par exemple on attribut la valeur "Envoyer" au bouton :

<input type="submit" value="Envoyer" />

Si l'on clique sur le bouton Envoyer du formulaire, nous serons redirigés vers la page indiquée par l'attribut action de <form>. Nous avions mis un faux nom (traitement.php). Ainsi il est normal qu'il y est une erreur lorsque l'on clique sur le bouton.

En outre on peut créer un bouton d'envoi à l'aide d'une image, pour cela il faut utiliser la balise
<input type ="image" /> et ajoutez l'attribut src pour indiquer le nom du fichier image à utiliser exemple :

<input type="image" src="envoyer.png" />

Rendre son formulaire plus accessible

Plus les formulaires contiennent d'éléments, plus il faut être vigilant à son organisation pour que les visiteurs ne s'y perdent pas.

Faire un formulaire accessible, ce n'est pas compliqué. Le XHTML nous donne des outils bien pratiques pour rendre nos formulaires plus clairs, plus faciles à utiliser.

Organiser son formulaire en plusieurs zones

Une des premières choses à faire pour rendre un gros formulaire plus clair et plus accessible, c'est de le découper en plusieurs parties.

Nous allons créer ce que l'on appelle des zones de formulaire. On a alors recours à la balise <fieldset> </fieldset>. Elle délimite un groupe de champs : l'on peut donc y mettre des balises <input />,<textarea>, etc.

Il faut aussi donner un nom à ce groupe de champs. On place une balise <legend></legend> au début du <fieldset>. Par exemple :

<fieldset>
<legend>Vos coordonnées</legend>

</fieldset>

Cela créera un groupe de champs dont le titre sera Vos coordonnées.

Prenons maintenant l'exemple concret d'un formulaire complet. Celui ci est découpé en deux parties :

<form method="post" action="traitement.php">
<h1>Agence de Voyage Vallauris (06) </h1>
<fieldset>
<legend>Vos coordonnées</legend>
<label for="nom">Nom :</label><input type="text" name="nom" id="nom" />
<br/>
<label for="prenom">Prénom :</label><input type="text" name="prenom" id="prenom" />
<br/>
<label for="adresse"> Adresse :</label><input type="text" name="adresse" id="adresse" />
<br/>
</fieldset>
<fieldset>
<legend>Vos options</legend>
<input type="checkbox" name="lettre" id="lettre" />
<label for="lettre">Envoyez moi la lettre mensuelle de l'agence de Vallauris</label>
<br/>
<input type="checkbox" name="pubs" id="pubs" />
<label for="pubs">Envoyez moi des pubs quotidiennes dans ma boîte aux lettres</label>
<br/>
<input type="checkbox" name="lettrepubs" id="lettrepubs" />
<label for="lettrepubs">Abonnez-moi aux lettres et pubs de tous vos partenaires commerciaux</label>

</fieldset>
<p><input type="submit" value="Envoyer" /></p>
</form>

Notre formulaire étant désormais organisé en plusieurs parties, sa logique de fonctionnement apparaît plus clairement aux yeux de l'internaute. Il sait désormais du premier coup d'œil ce qu'on attend de lui, qu'il rentre ses coordonnées et qu'il fasse plusieurs choix dans des cases à cocher.

Définir un ordre de tabulation

Pour remplir un formulaire, on utilise en général le clavier et la souris. Toutefois il est possible de se déplacer d'éléments en éléments en appuyant sur la touche Tabulation du clavier.

Le webmaster a la possibilité de définir l'ordre de tabulation. En clair l'on peut dire par exemple "Lorsqu'on est sur le champ nom, si l'on appuie sur Tabulation, on doit ensuite se retrouver sur le champs prenom"

La méthode consiste à donner un numéro à chaque élément de formulaire. Le visiteur se déplacera d'élément en élément, par ordre croissant de numéro. L'on peut donner un numéro à un champ grâce à l'attribut tabindex. Exemple :

<label for="nom">Nom : </label><input type="text" name="nom" id="nom"
tabindex="10" /><br/>
<label for="prenom">Prénom :</label><input type="text" name="prenom" id="prenom" tabindex="20" /><br/>
<label for="adresse">Adresse :</label><input type="text" name="adresse" id="adresse" tabindex="30" />

Définir des touches de raccourci

Les touches de raccourci sont un autre moyen efficace de rendre un formulaire plus accessible. Il est possible d'accéder à un élément de formulaire grâce à une touche de raccourci que l'on aura définie.

Pour définir une touche de raccourci, utilisez l'attribut accesskey sur la balise qui nous interessera. Par exemple, si l'on veut que la touche z soit associée au bouton d'envoi du formulaire, l'on doit faire :

<input type="submit" value="Envoyer" accesskey="z" />

Sous Firefox ou Ie (sous Windows), on peut désormais commander l'envoi du formulaire en appuyant sur Alt+z.

Voir la partie Introduction au CSS.